<template>
  <div class="app-container">
    <vxe-grid
      v-bind="gridOptions"
      @form-submit="formSubmitEvent"
      @form-reset="formResetEvent"
    >
      <template #active="{ row }">
        <vxe-button
          mode="text"
          status="error"
          icon="vxe-icon-delete"
          @click="removeRow(row)"
        ></vxe-button>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
import {
  getMaterialByPage,
  addMaterial,
  delMaterial,
  updateMaterial,
} from "@/api/processMgt/process";
const findPageList = async (page) => {
  await getMaterialByPage(page);
  // return new Promise(resolve => {
  //   setTimeout(() => {
  //     resolve({
  //       result: list.slice((currentPage - 1) * pageSize, currentPage * pageSize),
  //       page: {
  //         total: list.length
  //       }
  //     })
  //   }, 100)
  // })
};
export default {
  data() {
    const gridOptions = {
      sortConfig: {
        remote: true,
      },
      loading: false,
      stripe: true,
      showOverflow: true,
      showFooter: true,
      height: 800,
      columnConfig: {
        resizable: true,
        drag: true,
      },
      columnDragConfig: {
        trigger: "cell",
        showIcon: false,
        showGuidesStatus: true,
      },
      rowConfig: {
        isHover: true,
      },
      resizableConfig: {
        isDblclickAutoWidth: true,
      },
      pagerConfig: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      toolbarConfig: {
        refresh: true,
        import: true,
        export: true,
        print: true,
        zoom: true,
        custom: true,
        buttons: [
          { name: "新增", code: "myAdd", status: "primary" },
          { name: "删除", code: "myDel", status: "error" },
          { name: "保存", code: "mySave", status: "success" },
        ],
      },
      formConfig: {
        data: {
          name: "",
          role: "",
          sex: "",
          num: "",
          address: "",
        },
        items: [
          {
            field: "name",
            title: "名称",
            span: 8,
            itemRender: { name: "VxeInput", props: { clearable: true } },
          },
          {
            field: "name",
            title: "名称",
            span: 8,
            itemRender: { name: "VxeInput", props: { clearable: true } },
          },
          {
            span: 8,
            collapseNode: true,
            align: "right",
            itemRender: {
              name: "VxeButtonGroup",
              options: [
                { type: "submit", content: "搜索", status: "primary" },
                { type: "reset", content: "重置" },
              ],
            },
          },
          {
            field: "createTime",
            title: "时间",
            span: 8,
            folding: true,
            itemRender: {
              name: "VxeDatePicker",
              props: {
                multiple: true,
              },
            },
          },
        ],
      },
      columns: [
        { field: "seq", type: "seq", width: 70 },
        { field: "code", title: "编码", sortable: true, width: 180 },
        { field: "name", title: "名称", sortable: true, width: 180 },
        { field: "remark", title: "描述", width: 180 },
        { field: "createBy", title: "创建人", width: 180 },
        { field: "createTime", title: "创建时间", width: 180 },
        { field: "createTime", title: "创建时间", width: 180 },
        { field: "createTime", title: "创建时间", width: 180 },
        { field: "createTime", title: "创建时间", width: 180 },
        { field: "createTime", title: "创建时间", width: 180 },
        { field: "createTime", title: "创建时间", width: 180 },
        { field: "createTime", title: "创建时间", width: 180 },
        { field: "createTime", title: "创建时间", width: 180 },
        {
          field: "active",
          title: "操作",
          fixed: "right",
          width: 80,
          slots: { default: "active" },
        },
      ],
      scrollX: {
        gt: 0,
        enabled: true,
      },
      scrollY: {
        gt: 0,
        enabled: true,
      },
      proxyConfig: {
        // props: {
        //   result: 'result', // 配置响应结果列表字段
        //   total: 'page.total' // 配置响应结果总页数字段
        // },

        sort: true,
        form: true,
        ajax: {
          query: async ({ page, sorts, form }) => {
            console.log(page, sorts, form, "----");
            // 默认接收 Promise<{ result: [], page: { total: 100 } }>
            let result = await getMaterialByPage(page);
            return {
              result: result.data.records,
              page: {
                total: result.data.total,
              },
            };
          },
        },
      },
    };
    return {
      gridOptions,
    };
  },
  methods: {
    formSubmitEvent() {
      console.log("form submit");
    },
    formResetEvent() {
      console.log("form reset");
    },
  },
};
</script>
